<template>
  <div>
    <el-form :inline="true" size="mini" ref="form">
      <el-form-item label="区域">
        <dx-cascader :area_id.sync="form.areaId" :area_name.sync="areaName" ref="cascader" @change="handle_search" />
      </el-form-item>
      <el-form-item label="账期">
        <el-date-picker v-model="form.acctMonth" type="date" placeholder="选择帐期" value-format="yyyyMMdd" format="yyyy年MM月dd日" :picker-options="pickerDisDate" @change="handle_search">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handle_search">查询</el-button>
        <el-button type="success" @click="handle_export">导出</el-button>
      </el-form-item>
    </el-form>
    <keep-alive>
      <u-table v-if="!isDrill" ref="plxTable" class="tableBox" :height="height" show-header-overflow="ellipsis" stripe size="mini" :span-method="spanMethod" :cell-style="cellStyle"
        v-loading="loading">
        <u-table-column v-for="item in columns" :key="item.id" align="center" show-overflow-tooltip :prop="item.prop" :label="item.label" :minWidth="item.minWidth" :fixed="item.fixed">
          <template v-slot="{ row }" v-if="item.slot">
            <span v-if="item.slot == 'monPercent'" class="inline">
              <i class="dot" v-if="row.displayName != '合计'" :style="dotStyle(row[item.prop] )"></i> {{ row[item.prop] }}%
            </span>
            <span v-if="item.slot == 'dayPercent'" class="inline">
              <i class="dot" v-if="row.displayName != '合计'" :style="dotStyle(row[item.prop] )"></i> {{ row[item.prop] }}%
            </span>
            <el-button type="text" v-if="item.slot == `displayName` && row.displayName != '合计'" @click="handle_drill(row)">
              {{row[item.prop]}}
            </el-button>
            <span v-if="item.slot == `displayName` && row.displayName == '合计'">
              {{row[item.prop]}}
            </span>
          </template>
          <template v-slot="{ row }" v-else>
            {{ row[item.prop] }}
          </template>
        </u-table-column>
      </u-table>
    </keep-alive>

    <drilling v-if="isDrill" :params="drillParams" @handle_back="handle_drill"></drilling>

  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { downLoadExcelParams } from "@/utils/zipdownload";

export default {
  components: {
    Drilling: () => import("./drilling.vue"),
  },
  data() {
    return {
      areaName: "",
      disabledTime: "",
      form: {
        areaId: "",
        acctMonth: "",
      },
      columns: [],
      spanArr: [],

      loading: false,
      height: 0,
      pickerDisDate: {
        disabledDate: (time) => {
          let date = this.moment(this.disabledTime);
          let endDate = new Date(date);
          return time.getTime() > endDate.getTime();
        },
      },
      isDrill: false,
      drillParams: {
        areaId: "",
        acctMonth: "",
        areaName: "",
      },
    };
  },
  mounted() {
    this.fetchMhTrackDay();
    // this.getHeight();
    // window.addEventListener("resize", this.getHeight);
  },
  methods: {
    // getHeight() {
    //   this.$refs.form &&
    //     (this.height =
    //       window.innerHeight - this.$refs.form.$el.offsetHeight - 83 - 54 - 10);
    // },
    handle_search() {
      this.isDrill = false;
      this.fetchDayTrack();
    },
    dotStyle(value) {
      if (value >= 100) {
        return {
          background: "#7EC050",
        };
      } else if (value >= 60 && value < 100) {
        return {
          background: "#EBA246",
        };
      } else if (value >= 0 && value < 60) {
        return {
          background: "#FF0075",
        };
      } else if (value < 0) {
        return {
          background: "#FE0002",
        };
      }
    },

    async fetchMhTrackDay() {
      let { content } = await this.fetch($budgetAPI.fetchMhTrackDay, {});
      this.form.acctMonth = content;
      this.disabledTime = content;
      this.fetchDayTrack();
    },
    async fetchDayTrack() {
      this.loading = true;
      try {
        const { form } = this;
        let { content, code } = await this.fetch($budgetAPI.fetchDayTrack, {
          ...form,
        });

        if (code == 0) {
          this.columns = content.key.map((i, idx) => {
            return {
              label: content.name[idx],
              prop: i,
              minWidth: "50px",
              slot:
                (i == "monPercent" && "monPercent") ||
                (i == "dayPercent" && "dayPercent") ||
                (i == "displayName" && "displayName") ||
                undefined,
            };
          });
          this.$refs.plxTable.reloadData(content.data);

          let contactDot = 0;
          let spanArr = [];
          content.data.forEach((item, index) => {
            if (index === 0) {
              spanArr.push(1);
            } else {
              if (item.areaName === content.data[index - 1].areaName) {
                spanArr[contactDot] += 1;
                spanArr.push(0);
              } else {
                contactDot = index;
                spanArr.push(1);
              }
            }
          });
          this.spanArr = spanArr;
        } else {
          this.$refs.plxTable.reloadData([]);
        }
      } finally {
        this.loading = false;
      }
    },
    handle_export() {
      if (!this.isDrill) {
        const { form, areaName } = this;
        let fileName = `${areaName}-日跟踪-${form.acctMonth}`;
        downLoadExcelParams("/mhTrack/dayExport", { ...form }, fileName);
      } else {
        let fileName = `${this.drillParams.areaName}-日跟踪钻取-${this.drillParams.acctMonth}`;
        downLoadExcelParams(
          "/mhTrack/dayDrillExport",
          { ...this.drillParams },
          fileName
        );
      }
    },

    spanMethod({ columnIndex, rowIndex }) {
      var _this = this;
      if (columnIndex === 0) {
        if (columnIndex === 0) {
          if (_this.spanArr[rowIndex]) {
            return {
              rowspan: _this.spanArr[rowIndex],
              colspan: 1,
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.displayName == "合计") {
        return { background: "#DEF3FD", color: "#000" };
      }
    },
    //钻取
    handle_drill(row) {
      this.isDrill = !this.isDrill;
      this.drillParams.acctMonth = row && this.form.acctMonth;
      this.drillParams.areaId = row && row.areaId;
      this.drillParams.areaName = row && row.displayName;
    },
  },
};
</script>

<style lang="scss" scoped>
.inline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 30%;
}
.dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 50%;
  margin-right: 10px;
}
</style>